{quarto-pyodide} Demo RevealJS Document

Run SQL Interactively in Revealjs Presentation Made with Quarto

HR sample data

Here we will use a sample Database called HR that manages the HR data of the small businesses which is collected from www.sqltutorial.org. And to create the database, a SQLite script file was used when rendering the document. Read the extension docs for details.

ERD of HR database

The following database diagram illustrates the HR sample database:

Figure 1: ERD of HR database

Editable Example

And now, you can run all sort of queries from the tables of the HR databases.

select * from regions;

Not editable example

You can also create “not-editable” code chunk (that is, you simply can run the query but won’t be able to edit/modify it) for HR database. And to do this, just use another instance of database under the database key in the yaml with a different name and use the option editable: false.

Not editable example

select * from employees;

Welcome

Welcome to a demo RevealJS presentation that uses the quarto-webr extension to generate interactive code cells with Quarto and webR.

Important

This template requires a pre-release version of Quarto that is 1.4.502 or greater that contains an updated copy of pandoc. For more details, please see Issue #14.

Not the right template? Let’s go back to the documentation portal

webR in RevealJS

This is a webR-enabled code cell in a Quarto RevealJS document.

Base R Graphing with webR

ggplot2 in webR

Help Documentation

Prints, Warnings, and Errors

Keyboard Shortcuts

• Run selected code using either:
  • macOS: ⌘ + ↩︎/Return
  • Windows/Linux: Ctrl + ↩︎/Enter
• Run the entire code by clicking the “Run code” button or pressing Shift+↩︎.

Embedded Slides

You can embed the slide deck inside of a Quarto Website or Book by using:

<style>
.slide-deck {
    border: 3px solid #dee2e6;
    width: 100%;
    height: 475px;
}
</style>

<div>
```{=html}
<iframe class="slide-deck" src="path/to/presentation/"></iframe>
```
</div>

Note

Avoid using within a RevealJS presentation. Only 1 instance of webR should be running.

Fin

Thanks for checking out the demo! Let’s head back to the documentation portal.

Welcome

Welcome to a demo RevealJS presentation that uses the quarto-pyodide extension to generate interactive code cells with Quarto and Pyodide.

Not the right template? Let’s go back to the documentation portal

Pyodide in RevealJS

This is a Pyodide-enabled code cell in a Quarto HTML document.

matplotlib Graphing with Pyodide

quarto-{pyodide + countdown}

Pair code cells with a countdown timer to allow for practice

{{< countdown 00:05 top=0 >}}

Fill in the following function to say hi!

Keyboard Shortcuts

• Run selected code using either:
  • macOS: ⌘ + ↩︎/Return
  • Windows/Linux: Ctrl + ↩︎/Enter
• Run the entire code by clicking the “Run code” button or pressing Shift+↩︎.

Fin

Thanks for checking out the demo! Let’s head back to the documentation portal.